<template>
	<div>
		<p>source：{{ source.name }} <button @click="changeSource">修改source</button></p>
		<p>refVal：{{ refVal }} <button @click="changeRefVal">修改refVal</button></p>
		<p>toRefVal：{{ toRefVal }} <button @click="changeToRefVal">修改toRefVal</button></p>
	</div>
</template>

<script setup lang="ts">
import { ref, toRef, toRaw, reactive } from 'vue'
/*
  0.ref
  原始数据修改不会影响创建后的；但是有响应数据变化就会影响创建后的数据
  参数为引用类型，创建后的数据修改会影响原始数据,
  参数为基本类型，创建后的数据修改不会影响原始数据
  创建后的数据改变，会响应页面

  1.toRef
  创建一个ref类型数据, 并和以前的数据关联,
  原数据可响应，创建后的数据就可响应,否则不响应，但是有响应数据改变后，就可响应

  2.toRefs
  批量创建ref类型数据, 并和以前数据关联,toRef的批量版
*
*/

// 这里不会响应，但是有响应数据变化就会影响创建后的数据
const source = { name: '小红' }
function changeSource() {
	source.name = '小绿'
	console.log(source.name)
}

// TODO： ref
const refVal = ref(source.name)
function changeRefVal() {
	refVal.value = '小黑'
	console.log('source', source) // {name:'黑'}
	console.log('refVal', refVal.value) // {name:'小黑'}
}

// TODO： toRef
// 这里源数据是非响应数据，创建后的数据能响应是应为有ref数据 num 在变化
const toRefVal = toRef(source, 'name')
function changeToRefVal() {
	toRefVal.value = '小绿'
	console.log('source', source) // {name:'小绿'}
	console.log('toRefVal', toRefVal) // {name:'小绿'}
}
// TODO toRaw 将响应式对象转原始对象,  reactive()、readonly()、shallowReactive() 或者 shallowReadonly()
const obj = { a: 1 }
const u = reactive(obj)
const l = toRaw(u)
console.log(l === obj)
</script>
